<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
		<link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all">
		<link rel="stylesheet" th:href="@{/static/css/rightCon.css}" media="all">
		<style type="text/css">
			.pop-up{ padding: 15px 30px }
			.pop-title::before{
				content: '';
				display: block;
				width: 4px;
				height: 25px;
				background-color: #1C9399;
				position: absolute;
				left: 0;
				top: 0;
			}
			.btn-con span{ display: inline-block; padding: 0 25px; height: 40px; line-height: 40px; border-radius: 4px; margin: 0 20px; box-sizing: border-box; }
			.btn-con .btn-one{ background-color: #fafafa; border:1px solid #ddd; color:#666 }
			.btn-con .btn-two{ background-color: #1C9399; color: #fff; }
			.btn-bgRed{ background-color: #FA675C; color: #fff }

			/* 公开弹窗 */
			.add-mess-form-border p{ border: 1px solid #ddd; border-radius: 4px; padding: 0 10px;  width: 300px; box-sizing: border-box; }
			.add-mess-form-border span{ position: absolute; right: 0; top: 0; width: 50px; height: 33px; text-align: center; border-left: 1px solid #ddd; }
			.add-mess-form-border span img{ width: 20px; }
			.add-mess-pos{ position: absolute; right: 0; top: 10px; }

			/* 分页 */
			.layui-table-page{ height: auto; line-height: 32px; padding: 15px; border-top: 1px solid #eee; text-align: right; }
			.layui-table-page > div{ height: auto; }
			.layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: #1C9399; }
			.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span,.layui-table-page .layui-laypage button, .layui-table-page .layui-laypage input,.layui-table-page select{ height: 32px; line-height: 32px; margin-bottom: 0; box-sizing: border-box; }
			.layui-laypage-em,.layui-table-page .layui-laypage input,.layui-table-page .layui-laypage button, .layui-table-page .layui-laypage input,.layui-laypage select{ border-radius: 6px; }
			.layui-table-page select{ padding: 0 3px; }
			.layui-laypage input:focus,.layui-laypage select:focus{ border-color: #1C9399!important; }
			.number-page{ position: absolute; left: 15px; bottom: 15px; line-height: 32px; }

			.tree-con-box{ height: 100%; overflow: hidden; }
			.tree-con-box .tree-one{ height: 100%; padding:10px 0; margin-right: -20px; overflow: hidden; overflow-y: scroll; }

			.tree-children{ position: relative; display: flex; line-height: 40px; cursor: pointer; }
			.tree-children div:nth-child(1){ overflow: hidden; flex:1.5 }
			.tree-children div:nth-child(1) p{ float: left; }
			.tree-children div:nth-child(1) p img{ display: block; margin:16px 10px 15px 0 }
			.tree-one div.tree-children div.current{ background-color: rgba(28, 147, 153, 0.1); color: #1C9399; }
			.tree-one li div.tree-children div:nth-child(1) p:nth-child(1){ padding-left: 20px; }
			.tree-two li div.tree-children div:nth-child(1) p:nth-child(1){ padding-left: 40px; }
			.tree-three li div.tree-children div:nth-child(1) p:nth-child(1){ padding-left: 60px; }
			.tree-four li div.tree-children div:nth-child(1) p:nth-child(1){ padding-left: 80px; }
			.tree-five li div.tree-children div:nth-child(1) p:nth-child(1){ padding-left: 100px; }


			.add-mess-child > div.add-mess-form{ width: 300px; }
			.add-mess-child > div.add-mess-form > p{ border: 1px solid #ddd; border-radius: 4px; padding: 0 10px; }
			.add-mess-child .tree-con-box{ position:absolute; right: 0; top: 48px; width:300px; padding-bottom: 20px; z-index: 3; background-color: #fff; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15); border-radius: 4px; height: 260px; overflow: hidden; z-index: 110; }
			.add-mess-child .tree-con-box .tree-one{ padding:10px 0; margin-right: -20px; overflow: hidden; overflow-y: scroll; }
			.add-mess-child .tree-con-box .tree-children{ line-height: 40px; }
			.add-mess-child .tree-con-box .tree-children div:nth-child(1) p img{ margin: 16px 10px 16px 0; }
		</style>
	</head>

	<body class="layui-layout-body">
		<!--<div id="pop-con">
			<div class="pop-up">
				<div>
					<div class="border-bot1px pb20px mt10px relative">
						<div class="add-mess">
							<div class="add-mess-child left">
								<div>
									<label class="f14px">居住地区：</label>
								</div>
								<div class="add-mess-form">
									<p class="add-mess-form-tree"><input type="text" id="selectUser_name_search" placeholder="请输入姓名关键字" class="form-input"></p>
									<div class="tree-con-box" style="width: 300px;">
										<div class="border-bot1px pl20px pr20px lh45px gray"><span class="mr10px">/</span><span>无上级组织</span></div>
										<ul class="tree-one">
											<li>
												<div class="tree-children">
													<div>
														<p class="tree-arrow cursor"><img src="../img/icon_select_up.png"></p>
														<p>111一级济阳街道</p>
													</div>
												</div>
												<ul class="tree-two" hidden="hidden">
													<li>
														<div class="tree-children">
															<div>
																<p class="tree-arrow cursor"><img src="../img/icon_select_up.png"></p>
																<p>2222一级济阳街道</p>
															</div>
														</div>
														<ul class="tree-three" hidden="hidden">
															<li>
																<div class="tree-children">
																	<div>
																		<p class="tree-arrow cursor"><img src="../img/icon_select_up.png"></p>
																		<p>33333一级济阳街道</p>
																	</div>
																</div>
																<ul class="tree-four" hidden="hidden">
																	<li>
																		<div class="tree-children">
																			<div>
																				<p class="tree-arrow cursor"><img src="../img/icon_select_up.png"></p>
																				<p>44444一级济阳街道</p>
																			</div>
																		</div>
																		<ul class="tree-five" hidden="hidden">
																			<li>
																				<div class="tree-children">
																					<div>
																						<p>55555一级济阳街道</p>
																					</div>
																				</div>
																			</li>
																			<li>
																				<div class="tree-children">
																					<div>
																						<p>55555一级济阳街道</p>
																					</div>
																				</div>
																			</li>
																		</ul>
																	</li>
																	<li>
																		<div class="tree-children">
																			<div>
																				<p>44444一级济阳街道</p>
																			</div>
																		</div>
																	</li>
																</ul>
															</li>
														</ul>
														<ul class="tree-three">
															<li>
																<div class="tree-children">
																	<div>
																		<p class="tree-arrow cursor"><img src="../img/icon_select_up.png"></p>
																		<p>33333一级济阳街道</p>
																	</div>
																</div>
																<ul class="tree-four">
																	<li>
																		<div class="tree-children">
																			<div>
																				<p class="tree-arrow cursor"><img src="../img/icon_select_up.png"></p>
																				<p>44444一级济阳街道</p>
																			</div>
																		</div>
																		<ul class="tree-five">
																			<li>
																				<div class="tree-children">
																					<div>
																						<p>55555一级济阳街道</p>
																					</div>
																				</div>
																			</li>
																			<li>
																				<div class="tree-children">
																					<div>
																						<p>55555一级济阳街道</p>
																					</div>
																				</div>
																			</li>
																		</ul>
																	</li>
																	<li>
																		<div class="tree-children">
																			<div>
																				<p>44444一级济阳街道</p>
																			</div>
																		</div>
																	</li>
																</ul>
															</li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="add-mess-form-border left lh32px relative ml30px">
								<p><input type="text" placeholder="请输入"></p>
								<span><img src="../img/icon_search.png"></span>
							</div>
						</div>
						<p class="add-mess-pos"><img src="../img/close_icon.png" class="block pop-close"><p>
					</div>

					<div>
						<div class="overflow mt20px mb20px">
							<p class="left f16px">添加老人</p>
							<p class="right">共有<span class="red">120</span>条数据</p>
						</div>
						<div class="border1px border-radius4">
							<table class="layui-hide" id="test" lay-filter="test"></table>
						</div>
					</div>
					<div class="btn-con textCenter mt20px">
						<span class="btn-one">取&nbsp;消</span>
						<span class="btn-two">提&nbsp;交</span>
					</div>
				</div>
			</div>
		</div>-->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script th:src="@{/static/js/jquery-2.1.3.min.js}"></script>
		<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
		<script th:src="@{/static/js/selectUser.js}" charset="utf-8"></script>
		<script>
			var basePath = $("input#basePathInput",parent.document).val();
			var selectUser;
			//左侧菜单栏
			layui.use(['table', 'layer'], function() {
				var table = layui.table;
				var layer = layui.layer;

				//layerOpen(table,layer);
				SelectUser.initSelectUser(layer,table,"1","",selectUserConfirm);

			});

			function selectUserConfirm() {
				alert("confirm");
				selectUser = SelectUser.selectUserList;
				console.info(selectUser);
			}

		</script>
	</body>

</html>
